<template>
  <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
</template>

<script>
import JSON from "../../assets/hd.json";
import hdMapBgUrl from "../../assets/img/hd-map.png";

export default {
  name: "charts-map",
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let img = new Image();
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      // 设置背景图片
      canvas.width = myChart.getWidth() * window.devicePixelRatio;
      canvas.height = myChart.getHeight() * window.devicePixelRatio;

      let fullImage = new Image();
      img.onload = function() {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        fullImage.src = canvas.toDataURL();
        setTimeout(function() {
          myChart.resize();
        }, 100)
      }
      img.src = hdMapBgUrl
      // 绘制图表
      this.$echarts.registerMap("横店镇", JSON, {}); //这个是关键，之前拿到的横店镇数据
      let mapOption = {
        title: {
          text: "横店镇基地分布图",
        },
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{b}<br/>{c} (p / km2)",
        // },
        geo: {
          map: "china",
          roam: false,// 一定要关闭拖拽
          zoom: 1.23,
          center: [120, 29], // 调整地图位置
          label: {
            normal: {
              show: false, //关闭省份名展示
              fontSize: "10",
              color: "rgba(0,0,0,0.7)"
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#0d0059",
              borderColor: "#389dff",
              borderWidth: 1, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: "#01012a"
            },
            emphasis: {
              areaColor: "#184cff",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        backgroundColor: {
          type: "pattern",
          repeat: "repeat",
          image: fullImage
        },
        visualMap: {
          min: 800,
          max: 50000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['rgab(0,0,0,0)', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: "横店镇",
            type: "map",
            mapType: "横店镇", // 自定义扩展图表类型
            label: {
              show: true,
            },
            data: [
              { name: '横店镇', value: 0 },
            ],
          }
        ]
      }
      myChart.setOption(mapOption);
    }
  }
}
</script>

<style scoped>

</style>
